<template>
  <el-button
    text
    @click="dialogVisible = true"
    style="
      width: 84px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background-color: #f93684;
      color: #fff;
      border-radius: 20px;
      margin-right: 30px;
    "
    >创建</el-button
  >
  <el-dialog
    v-model="dialogVisible"
    draggable
    class="el-ewm"
    style="width: 400px"
  
  >
    <p class="ewm" style="margin-left: 60px;"><span >请打开 中舞网APP 扫码,使用此功能</span></p>
    <div class="qr-box">
      <img src="./1.png" alt="" />
    </div>
    <div class="dialog">
      <p class="tips">扫描此二维码，同样可下载</p>
    </div>
   <p style="margin-left: 150px;">"中舞网APP”</p>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";

const dialogVisible = ref(false);
</script>

<style scoped>
.el-ewm {
  width: 100px;
}
.ewm {
  font-size: 18px;
  color: #606266;
}
.qr-box {
  width: 360px;
  height: 220px;
  margin: auto;
  position: relative;
}
.qr-box > img {
  /* display: none; */
  width: 180px;
  /* margin-top: -20px; */
  position: absolute;
  left: 100px;
  top: 40px;
}
.dialog {
  width: 360px;
}
.dialog .tips {
  color: #111;
  text-align: center;
  padding: 20px 0 0 0;
  font-size: 14px;
}
</style>